<!--
  ~ Copyright (c) 2017 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0
  ~
  ~ SPDX-License-Identifier: EPL-2.0
  -->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Eclipse Ditto: REST to WebSocket Demonstrator</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body class="mt-5">

    <nav class="navbar navbar-expand-md fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="img/ditto_allwhite_symbolonly.svg" style="max-height: 40px; margin-right: 1rem;">
                Eclipse Ditto: REST to WebSocket Demonstrator
            </a>
        </div>
    </nav>


    <div id="content" class="container pt-3">
        <div class="container mt-2 mb-5">
            <div class="row">
                <div class="col mb-3">
                    <label for="dittoHost">Host</label>
                    <input type="text" class="form-control" id="dittoHost" value="localhost:8080">
                </div>
                <div class="col mb-3">
                    <label for="dittoUser">User</label>
                    <input type="text" class="form-control" id="dittoUser" value="ditto">
                </div>
                <div class="col mb-3">
                    <label for="dittoPassword">Password</label>
                    <input type="password" class="form-control" id="dittoPassword" value="ditto">
                </div>

            </div>
        </div>

        <div class="container row">
            <div class="col-12 col-md-5" id="restFrontend">
                <div class="col mb-3 text-center">
                    <h1>Frontend</h1>
                    <h5>REST</h5>
                </div>

                <div class="row mb-3">
                    <div class="col">
                        <button class="btn btn-outline-primary " id="exists">Check if Twin exists</button>
                    </div>
                    <div class="col">
                        <button class="btn btn-outline-primary float-right" id="create">Create Twin</button>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col">
                        <button class="btn btn-primary float-right" id="turn-on-water-tank">Heat up the water tank</button>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col">
                        <button class="btn btn-primary float-right" id="turn-off-water-tank">Stop heating the water tank</button>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col"><button class="btn btn-primary float-right" id="make-coffee">Go make me a coffee</button></div>
                </div>

                <div class="row mb-3">
                    <div class="col"><button class="btn btn-outline-secondary dismiss-all float-right">Dismiss all messages</button></div>
                </div>

                <div class="row mb-3">
                    <div class="col">
                        <div id="rf-alerts">
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-2" id="ditto">
                <div class="row" id="first-border"></div>
                <div class="row justify-content-center">
                    <img src="img/ditto.svg">
                </div>
                <div class="row" id="second-border"></div>
            </div>

            <div class="col-12 col-md-5" id="smartCoffee">
                <div class="text-center mb-3">
                    <h1>SmartCoffee</h1>
                    <h5>WebSocket Thing</h5>
                </div>

                <div id="wsinfo" class="progress mb-3">
                    <div class="closed progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Closed</div>
                    <div class="opening progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%; display:none" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Connecting</div>
                    <div class="opened progress-bar bg-success" role="progressbar" style="width: 100%; display:none" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Connected</div>
                </div>

                <div class="row mb-3 text-center">
                    <div class="col">
                        <div id="water" class="ion-waterdrop info-icon"></div>
                    </div>
                    <div class="col">
                        <div id="coffee" class="ion-coffee info-icon"></div>
                    </div>
                </div>

                <div class="row mb-3 text-right">
                    <div class="col">
                        <button class="btn btn-outline-primary" id="connect">Connect</button>
                    </div>
                    <div>
                        <button class="btn btn-outline-secondary dismiss-all">Dismiss all messages</button>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col">
                        <div id="sc-alerts">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="captchaModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Captcha required</h5>
                    <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
            </button>
                </div>
                <div class="modal-body text-center">
                    <p>Please solve the following Captcha</p>
                    <img id="captchaImg">
                </div>
                <div class="modal-footer">
                    <input type="text" id="captchaSolveText" class="form-control">
                    <button type="button" class="btn btn-primary" id="captchaSolveButton">Solve</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="existsModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
            </button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
    <script src="SmartCoffeeApp.js"></script>
    <script src="FrontendApp.js"></script>
    <script src="index.js"></script>

</body>

</html>
